<template>
  <div class="top-menu">
    <div class="fold-icon">
      <el-tooltip effect="dark" :content="toolTipMsg" placement="right">
        <div class="fold-menu" @click="clickFoldIcon">
          <i class="el-icon-s-unfold" v-if="folded"></i>
          <i class="el-icon-s-fold" v-else></i>
        </div>
      </el-tooltip>
    </div>

    <div class="right-menu">
      <span class="full-screen" @click="setFullScreen">
        <el-tooltip effect="dark" content="全屏" placement="bottom">
          <i class="el-icon-full-screen"></i>
        </el-tooltip>
      </span>
      <span>
        <el-button type="danger" @click="handleLogout">退出</el-button>
      </span>
      <span class="username">{{userInfo.name}}</span>
      <span class="dept">{{userInfo.dept}}</span>
    </div>
  </div>
</template>
<script>
import { Button, Icon, Tooltip, Dialog } from "element-ui";
import { checkLogin, logout } from "@/api/user.js";



export default {
  name: "TopMenu",
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Tooltip.name]: Tooltip,
    [Dialog.name]: Dialog
  },
  props: {
    folded: Boolean
  },
  data() {
    return {
      userInfo: {
        id: null,
        name: null,
        dept: null,
        role: null,
        roleName: null,
        org: null
      }
    };
  },
  mounted() {
    checkLogin()
      .then(res => {
        this.userInfo = res;
      })
      .catch(errMsg => {});
  },
  computed: {
    toolTipMsg() {
      return this.folded ? "点击展导航" : "点击折叠导航";
    }
  },
  methods: {
    clickFoldIcon() {
      this.$emit("clickFoldIcon");
    },
    handleLogout() {
      logout()
        .then(() => {
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    setFullScreen() {
      this.$emit("clickFullScreen");
    }
  }
};
</script>
<style lang="stylus" scoped>
.top-menu {
  vertical-align: middle;
  height: 50px;
  padding-left: 10px;
  background-color: #ddd;
  position: relative;

  .fold-icon {
    width: 25px;
    height: 25px;
    float: left;

    .fold-menu {
      font-size: 26px;
      line-height: 50px;
      cursor: pointer;

      &:hover {
        color: #ffd04b;
      }
    }
  }

  .right-menu {
    float: right;
    height: 50px;
    padding-right: 20px;

    span {
      display: inline-block;
      margin-right: 20px;
      line-height: 43px;
      color: #333;
    }

    .username {
      color: red;
    }

    .full-screen {
      font-size: 28px;
      vertical-align: middle;
      cursor: pointer;
      transition: all 0.5s;

      &:hover {
        color: #67C23A;
        font-size: 34px;
      }
    }
  }

  .dream-dialog {
    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
    }

    img {
      display: block;
      position: absolute;
      height: 200px;
      left: 150px;
    }
  }
}
</style>